<template>
  <div>
    <el-row>
      <el-col>
        <div id="NestedLoop" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let NestedLoop = this.$echarts.init(document.getElementById('NestedLoop'));
        // 绘制图表
        NestedLoop.setOption(
          {
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
              orient: 'vertical',
              x: 'left',
              data:['胰岛素使用','胰岛移植 ','二甲双孤','无创血糖监测','足溃烂','关联性研究','胃病患者']
            },
            series: [
              {
                name:'访问来源',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                  normal: {
                    position: 'inner'
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data:[
                  {value:679, name:'基础研究'},
                  {value:1548, name:'临床研究', selected:true}
                ]
              },
              {
                name:'访问来源',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                  normal: {
                    borderWidth: 1,
                    borderRadius: 4,
                    // shadowBlur:3,
                    // shadowOffsetX: 2,
                    // shadowOffsetY: 2,
                    // shadowColor: '#999',
                    // padding: [0, 7],
                    rich: {
                      a: {
                        color: '#999',
                        lineHeight: 22,
                        align: 'center'
                      },
                      // abg: {
                      //     backgroundColor: '#333',
                      //     width: '100%',
                      //     align: 'right',
                      //     height: 22,
                      //     borderRadius: [4, 4, 0, 0]
                      // },
                      hr: {
                        borderColor: '#aaa',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                      },
                      b: {
                        fontSize: 16,
                        lineHeight: 33
                      },
                      per: {
                        color: '#eee',
                        backgroundColor: '#334455',
                        padding: [2, 4],
                        borderRadius: 2
                      }
                    }
                  }
                },
                data:[
                  {value:335, name:'胰岛素使用'},
                  {value:310, name:'胰岛移植'},
                  {value:234, name:'二甲双孤'},
                  {value:135, name:'无创血糖监测'},
                  {value:1048, name:'足溃烂'},
                  {value:251, name:'关联性研究'},
                  {value:351, name:'胃病患者'},
                ]
              }
            ]
          }
        );
      }
    }
  }
</script>

<style scoped>

</style>
